/*
 * @Author: lusx
 * @Date: 2019-02-18 13:41:35
 * @Last modified by:   lusx
 * @Last modified time: 08-04-2019 11:59:36
 */

import { Card, Col, Row } from 'antd';
import {WeaEchart} from 'ecCom';
import {toJS} from 'mobx';
import _ from "lodash";
import { inject, observer} from 'mobx-react';

//仪表视图
@inject('countStore')
@observer
class GovernChart extends React.Component {

    constructor(props) {
        super(props);
    }
    componentDidUpdate(){
      let {dataList=[]} = this.props;;
        for(let i=0; i<dataList.length; i++){
          this[`echart${i}`] && this[`echart${i}`].paint();
        }
    }
    componentWillUnmount() {
      this.props.countStore.data.pies=[];
    }    
    setRef = (ref, alias) => {
      this[alias] = ref;
    }
   
    render() {
        let {dataList=[],optionTemplate,newWidth} = this.props;
        const height = document.body.clientHeight/2.5;
        const optionDatas = dataList.map((item,index)=>{

          return {
            option: this.props.optionTemplate(item,index)
              }
        });
        return (
            <div className="g-meterChart">
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hmrgb9`} type="flex" justify="space-around">
                  {
                      
                    optionDatas.map((item,index)=>(
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@o8wuio@${item.key}`} span={24/dataList.length} key={item.key}>
                        <div style={{height:`${height}px`,width:newWidth}} >
                          <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@3hd90s@${item.key}`} 
                          key ={index}  
                          option={toJS(item.option)} 
                          useDefault={false}   
                          ref={ref =>this.setRef(ref,`echart${index}`)}  
                           />
                        </div>
                      </Col>
                    ))
                  }
              </Row>
            </div>
        )
    }
}
export default GovernChart;
